<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>Hello React!</title>
		<script src="lib/react.js"></script>
		<script src="lib/react-dom.js"></script>
		<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
		<script type="text/babel">
			
			
var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: true};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);






var MyBox = React.createClass({  
    render: function() {  
        return (  
            <div>  
                用户名：<Input type="text"></Input><br/>  
                密码：<Input type="password"></Input>  
            </div>  
        );  
    }  
});  
var Input = React.createClass({  
    render: function() {  
        return (  
            <input type={this.props.type} />  
        );  
    }  
});  
ReactDOM.render(    
    <MyBox />,   
    document.getElementById('content')    
);   




var HelloWorld = React.createClass({    
    render: function() {    
        return (    
            <div>    
                <input type="text" placeholder="Please enter your name!" />    
                {this.props.date.toString()}    
            </div>    
        );    
    }    
});    
setInterval(function() {    
    ReactDOM.render(    
        <HelloWorld date={new Date()} />,    
        document.getElementById('timeBox')    
    );    
}, 1000);  
		</script>
	</head>

	<body>
		<h1 id="example"></h1>
		<h1 id="content"></h1>
		<h1 id="timeBox"></h1>


	</body>

</html>